<template>
  <div class="ui-panle"  style="padding-top:20px;text-align:center;margin-top:50px;">
    <img src="../assets/rustlogo2.png">
    <div  style="padding:50px 10px;padding-right:40px;padding-top:20px;margin:auto;" v-width="400" @keyup.enter="submitAsync">
      <Form :label-width="100" :model="data" :rules="validationRules" ref="form" :top="0.2" showErrorTip>
      <FormItem label="用户名" prop="username">
        <template v-slot:label><i class="fas fa-user-alt"></i>&nbsp;&nbsp;用户名</template>
        <input type="text" v-model="data.username">
      </FormItem>
      <FormItem label=" 密码" prop="password" >
        <template v-slot:label><i class="fas fa-lock"></i>&nbsp;&nbsp;密<b style="padding-right:1px;"></b>&nbsp;&nbsp;&nbsp;码</template>
        <input type="password" v-model="data.password">
      </FormItem>
      <FormItem>
        <Button color="primary" :loading="isLoading" @click="submitAsync">登 录</Button>&nbsp;&nbsp;&nbsp;
        <!-- <Button @click="reset">重置</Button> -->
      </FormItem>
    </Form>
    </div>
  </div>
</template>

<script>


export default {
  name: 'Home',
  data() {
    return {

      isLoading:false,
      data:{
        username:'',
        password:''
      },
      validationRules: {
        rules: {
          username: {
            maxLen: 32,
            minLen: 1
          },
          password: {
            maxLen: 32,
            minLen: 1
          },
        },
        required: [
          'username',
          'password'
        ],
      }
    }
  },
  methods:{
    async submitAsync() {
      this.isLoading = true;
      //this.$refs.form.validAsync()
      let validResult = this.$refs.form.valid()
      if (validResult.result) {
        let ret = await this.$API.login(this.data)
        console.log(ret)
        if (ret.code == 0) {
          this.$Message({ type: 'success', text: ret.msg });
          setTimeout(()=>{
            this.$router.push('/server-list')
          },1000)
        }
        else {
          this.$Message({ type: 'error', text: ret.msg });
        }
        this.isLoading = false
      } else {
        this.isLoading = false
      }
    },
  }

}
</script>
